<template>
  <div>
    <nav-bar>
      <img
        src="../../assets/img/navbar/ic_title_close.png"
        slot="left"
        class="left"
        alt=""
        @click="$router.back()"
      />
      <span slot="center">开服表</span>
      <img
        src="../../assets/img/navbar/ic_share.png"
        @click="show = !show"
        slot="right"
        class="right"
        alt=""
      />
    </nav-bar>
    <div class="game_type">
      <span
        v-for="(item, index) in gameTitle"
        :key="index"
        :class="[currentGame === index ? 'gametype_active' : '']"
        @click="gameTypeClick(index)"
      >
        {{ item }}
      </span>
    </div>
    <div class="server_time">
      <ul>
        <li
          v-for="(item, index) in serverTime"
          :key="index"
          @click="dateClick(index)"
        >
          <van-button
            round
            class="control_item"
            :class="currentDate === index ? 'control_item_active' : ''"
            >{{ item }}</van-button
          >
        </li>
      </ul>
    </div>
    <div class="content_box" ref="viewhome">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <ul class="list_box">
          <li
            v-for="(item, index) in list"
            :key="index"
            class="list_item"
            @click="seeClick(index)"
          >
            <div class="gameicon">
              <img :src="item.gameicon" alt="" />
            </div>
            <div class="game_center">
              <div class="game_name">{{ item.gamename }}</div>
              <div class="game_discount">
                <span v-if="item.game_type === '1'">BT游戏</span>
                <span v-else-if="item.game_type === '2'">折扣游戏</span>
                <span v-else-if="item.game_type === '3'">H5游戏</span>
              </div>
              <div>
                <span class="onlinetime">{{ item.begintime | fnDate }}</span>
                <span class="server">[{{ item.servername }}]</span>
              </div>
            </div>
            <div class="game_btn">查看</div>
          </li>
        </ul>
      </van-list>
      <back-top :scrollTop="scTop" @back-top="backTop"/>
    </div>
    <div
      class="bottom_btn"
      v-show="!typeList.openserver"
      @click="typeClose"
    ></div>
    <server-popup
      :show="show"
      @close-click="closeClick"
      @share-link="shareLink"
      id="copy_url"
      :data-clipboard-text="this.serverUrl"
    />
  </div>
</template>

<script>
import NavBar from "../../components/common/navbar/NavBar.vue"
import { getServerGame , getInviteData} from "../../network/home"
import jutils from "jutils-src"
import storage from "../../common/storage"
import ServerPopup from "./server/ServerPopup.vue"
import NativeShare from 'nativeshare'
import Clipboard from 'clipboard'
import {Toast} from 'vant'
import BackTop from '../../components/common/backTop/BackTop.vue';
import mixinBackTop from '../../mixins/common'
export default {
  name: 'StartServer',
  mixins: [mixinBackTop],
  components: { NavBar, ServerPopup, BackTop },
  data() {
    return {
      show: false,
      loading: true,
      page: 1,
      gameType: 1,
      timeType: 1,
      finished: false,
      currentGame: 0,
      currentDate: 0,
      gameTitle: ["BT游戏", "折扣游戏", "H5游戏"],
      serverTime: ["今日", "明日", "一周"],
      list: [],
      typeList: {},
      tgid: "",
      serverUrl: '',
      scrollTop: '',
    };
  },
  beforeRouteLeave (to, from, next) {
    this.scrollTop = document.documentElement.scrollTop || document.querySelector('.content_box').scrollTop
    console.log(this.scrollTop)
    next()
  },
  activated() {
    const top = document.querySelector('.content_box')
    top.scrollTo(0, this.scrollTop);
    this.typeList = storage.get(this.tgid)
  },
  created() {
    this.getServerList()
    this.getExtension()
    this.tgid = this.$cookies.get("tgid")
    this.typeList = storage.get(this.tgid)
  },
  methods: {
    getServerList() {
      getServerGame(this.gameType, this.timeType, this.page).then((res) => {
        if (res.state === "ok") {
          console.log(res.data)
          this.list = [...this.list, ...res.data.list]
          this.loading = false
          if (res.data.list === null) {
            this.loading = true
          }
        } else if (res.msg === "no_login") {
          this.$router.replace("/login")
        }
      })
    },
    getExtension() {
        getInviteData().then(res => {
          if(res.state === 'ok') {
            this.serverUrl = res.data.server_url
          } else if (res.state === 'err') {
            if(res.msg === 'no_login') {
              this.$toast(res.msg)
              this.$router.replace('/login')
            }else {
              this.$toast(res.msg)
            }
          }
        })
      },
    gameTypeClick(index) {
      this.list = [];
      this.page = 1;
      this.currentGame = index;
      if (index === 0) {
        this.gameType = 1;
      } else if (index === 1) {
        this.gameType = 2;
      } else if (index === 2) {
        this.gameType = 3;
      }
      this.getServerList();
    },
    dateClick(index) {
      this.list = [];
      this.page = 1;
      this.currentDate = index;
      if (index === 0) {
        this.timeType = 1;
      } else if (index === 1) {
        this.timeType = 2;
      } else if (index === 2) {
        this.timeType = 7;
      }
      this.getServerList();
    },
    closeClick() {
      this.show = !this.show;
    },
    onLoad() {
      this.page++;
      this.getServerList();
    },
    typeClose() {
      this.typeList.openserver = true;
      this.$toast("已经添加到首页导航区");
      storage.set(this.tgid, this.typeList);
    },
    seeClick(index) {
      this.$router.push("/gameinfo/gameid/" + this.list[index].gameid);
    },
    shareLink(val) {
      switch (val) {
        case 0:
          this.call("wechatFriend");
          break;
        case 1:
          this.call("wechatTimeline");
          break;
        case 2:
          this.call("qqFriend");
          break;
        case 3:
          this.call("qZone");
          break;
        case 4:
          this.copyClick();
          break;
      }
    },
    call(command) {
      var nativeShare = new NativeShare();
      var shareData = {
        link: this.serverUrl,
        success: function () {
          Toast("success")
        },
        fail: function () {
          Toast("fail")
        },
      }
      nativeShare.setShareData(shareData)
      try {
        nativeShare.call(command)
      } catch (err) {
        // 如果不支持，你可以在这里做降级处理
        console.log(err.message)
      }
    },
    copyClick() {
      let clipboard = new Clipboard("#copy_url")
      clipboard.on("success", (e) => {
        Toast("已复制到剪切板")
        clipboard.destroy(); // 释放内存
      });
      clipboard.on("error", (e) => {
        // 不支持复制
        Toast("该浏览器不支持复制")
        clipboard.destroy(); // 释放内存
      });
    },
  },
  filters: {
    fnDate: function (date) {
      // YYYY-MM-DD HH:ii:ss
      return jutils.formatDate(new Date(date * 1000), "YYYY-MM-DD");
    },
  },
};
</script>

<style scoped>
.left,
.right {
  width: 44px;
  height: 44px;
}

.add_address {
  position: fixed;
  top: 88px;
  left: 0;
  right: 0;
  width: 670px;
  height: 88px;
  padding: 0 40px;
  border-top: 8px solid #e6e6e6;
  border-bottom: 8px solid #e6e6e6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 30px;
  color: #333;
}

.icon_back span {
  font-size: 48px;
  margin-left: 10px;
}

.icon_back img {
  display: inline-block;
  width: 22px;
  height: 36px;
  margin-left: 20px;
}

.game_type {
  position: fixed;
  top: 88px;
  left: 50%;
  transform: translateX(-50%);
  width: 750px;
  height: 88px;
  box-sizing: border-box;
  padding: 0 40px;
  line-height: 88px;
  font-size: 30px;
  color: #666;
  font-weight: 450;
  background: #fff;
  z-index: 10;
}

.gametype_active {
  border-bottom: 6px solid #344ede;
  color: #333;
}

.game_type span {
  box-sizing: border-box;
  height: 88px;
  display: inline-block;
  margin: 0 20px;
}

.server_time {
  width: 670px;
  padding: 0 40px;
  height: 98px;
  background: #ededed;
  position: fixed;
  top: 176px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.server_time ul {
  display: flex;
  align-items: center;
  height: 98px;
}

.control_item {
  width: 130px;
  height: 66px;
  font-size: 28px;
  margin-right: 20px;
  border: 0;
  color: #333;
  background: #fff;
}

.control_item_active {
  color: #fff;
  background: rgb(129, 129, 129);
}

.content_box {
  width: 750px;
  /* position: fixed; */
  margin-top: 274px;
  margin-left: 50%;
  transform: translateX(-50%);
  /* bottom: 0; */
  /* overflow: scroll; */
  padding-bottom: 120px;
  background: #fff;
}

.list_box {
  width: 670px;
  padding: 0 40px;
}

.list_item {
  padding: 20px 0;
  width: 670px;
  height: 130px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
}

.gameicon,
.game_btn {
  flex-shrink: 1;
}

.game_center {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 22px;
}

.gameicon img {
  width: 130px;
  height: 130px;
  margin-right: 20px;
}

.game_btn {
  width: 115px;
  height: 115px;
  text-align: center;
  line-height: 115px;
  font-size: 28px;
  color: #344ede;
  border: 1px solid #344ede;
  border-radius: 50%;
}

.game_center {
  height: 110px;
  padding: 0 10px;
}

.game_name {
  font-size: 26px;
  color: #333;
  font-weight: 500;
  width: 370px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.game_discount {
  color: #344ede;
}

.onlinetime {
  margin-right: 20px;
  color: #e73b1d;
}

.server {
  color: #868686;
}

.bottom_btn {
  width: 750px;
  height: 88px;
  background: #fff;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  padding-bottom: env(safe-area-inset-bottom);
}

.bottom_btn::before {
  content: "";
  width: 44px;
  height: 44px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url("../../assets/img/page/ic_bottom_add.png") no-repeat;
  background-size: 100%;
}
</style>